<template>
  <div class="">
    <!-- 通过this.$store.state属性来访问状态 -->
    <h2>数量{{ $store.state.counter }}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <!-- home  getters相关内容 -->
    <h1>getters相关内容</h1>
    <h2>{{ $store.getters.powerCount }}</h2>
    <h2>{{$store.getters.moreStu}}</h2>
    <h2>{{$store.getters.moreStuLength}}</h2>
    <h1 >是的{{$store.getters.moreAge(10)}}</h1>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>
    <button @click="updateInfo">增加属性</button>
    <hellovuex></hellovuex>
  </div>
</template>

<script>
import hellovuex from "../components/hellovuex";
export default {
  components: { hellovuex },
  data() {
    return {};
  },
  watch: {},
  created() {},
  mounted() {},
  computed: {
   
  },
  methods: {
    add() {
      // 通过this.$store.commit('mutation中方法')来修改状态
      this.$store.commit("increment");
    },
    sub() {
      this.$store.commit("decrement");
    },
    // 参数num,stu 在vue里的专业名称是payload 负载
    addCount(num){
      // 1.普通的提交封装
      // this.$store.commit('addCount',num)
      // 2.特殊的提交封装
      this.$store.commit({
        type:'addCount',
        num,
      })

    },
    updateInfo(){
      this.$store.commit('updateInfo')
    },
    // 添加一个对象
    addStudent(){
      const stu ={id:5,name:'小七',age:22}
      this.$store.commit('addStudent',stu)
    }
  },
};
</script>
<style lang='less' scoped>
</style>